<template>
  <div>
    <div class="perExitBar">
      <div class="leftText">
        {{leftText}}
        <span class="iconfont" :class="iconClass"></span>
      </div>
      <div class="rightText">
        {{rightText}}
        <span class="iconfont icon-you" @click="exitClick"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['leftText','rightText','iconClass'],
  methods: {
    exitClick(){
      this.$emit('exitClick')
    }
  },
};
</script>

<style lang="less" scoped>
.perExitBar {
  padding: 5.556vw;
  padding-left: 0;
  margin-left: 5.556vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #26b18e;
  .leftText,.rightText{
      display: flex;
      align-items: center;
      justify-content: space-around;
  }
  .leftText{
      span{
          padding-left: 2.222vw;
      }
  }
  .rightText{
      font-size: 3.889vw;
      span{
          padding-left: 2.222vw;
      }
  }
}
</style>